<!-- ========= -->
<!-- = Style = -->
<!-- ========= -->
<style>


#detailPanel {
	background: black url(http://warcache.googlecode.com/hg/detail_page_back.png) no-repeat; 
	width: 1041px;
	height: 600px;
	text-align: left;
}

#detailMenu {  
	margin:0; padding: 0; border: none; 
	position: absolute; left: 360px; top: 324px;
	background: transparent;
	width: 340px;
	text-align: center;
	color: red;
}

#abilityIcon {
	position: absolute;
	top: 8px;
	left: 0;
	width: 64px;
	height: 64px;
}

#abilityIconSurround {
	position: absolute;
	top: 8px;
	left: 0;
	width: 64px;
	height: 64px;
}

#abilityExtra {
	position: absolute;
	top: 8px;
	left: 400px;
	width: 400px;
	height: 200px;
}

#abilityExtraTable {
	width: 100%;
	border: 1px dotted #2f4f72;
	color: #ebca7d;
	font: verdana;
	font-size: 13px;
	line-height: 20px;
	font-weight: bold;
	padding: 0;
	margin: 0;
}

.abilityExtraTable_value {
	text-align: center;
	color: #2f4f72;
}

#abilityLevelDiv {
	width: 100%;
	border: 1px dotted #2f4f72;
	color: #ebca7d;
	font: verdana;
	font-size: 13px;
	line-height: 20px;
	font-weight: bold;
	padding: 0;
	margin: 0;
}

.abilityLevelButton {
	width: 40px; height: 16px;
	text-align: center;
	border: 1px dotted #2f4f72;
	color: red;
	background: transparent;
	cursor: pointer;
}

#tt {
	position: relative;
	top: 8px;
	left: 100px;
}

#ttNorth {
	width: 243px;
	height: 7px;
	background: url(http://warcache.googlecode.com/hg/show_tooltip_north.png);
}

#ttCenter {
	width: 243px;
	height: auto;
	background: url(http://warcache.googlecode.com/hg/show_tooltip_center.png);
}

#ttCenterTable {
	width: 100%;
	border: none;
	margin: 0;
	padding: 0 8px 0 8px;
	color: white;
	font: verdana;
	font-size: 11px;
	line-height: 11px;
}

#ttSouth {
	width: 243px;
	height: 7px;
	background: url(http://warcache.googlecode.com/hg/show_tooltip_south.png);
}

.ttTitleRow {
	color: #ebca7d;
	font-size: 12px;
	font-weight: bold;
}

.ttRight {
	text-align: right;
}

.ttSeperator {
	padding: 0;
	margin: 0;
	font-size: 2px;
	line-height: 2px;
}

.ttRequirementRow {
	color: #2f4f72;
}

#tooltip_English_description {
	color: #ebca7d;
}

#comments {
	overflow: auto;
	margin: 0 32px 8px 32px;
	height: 300px;
}

.comment {
	color: #2f4f72;
	font: verdana;
	font-size: 12px;
	line-height: 12px;
}

#commentHeader {
	color: #ebca7d;
	font: verdana;
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	margin: 0 32px 16px 32px;
}




</style> 

<!-- ========== -->
<!-- = Script = -->
<!-- ========== -->
<script type="text/javascript">

var detailCommentsSourceUrl = "http://spreadsheets.google.com/tq?key=0AhqHFpvBhkNTdGdpYzdTcDFENTRnYVRuU1lEU1FFZHc&pub=1";
var detailCommentsTable = null;
var detailColumnLabelToColumnIdMappings = new Array();

function detailInit() {
	
	// create ability level buttons
	for(i=1; i<=40; i++) {
		$("#abilityLevelContainer").append("<button id='abilityLevelButton"+i+"' class='abilityLevelButton'>"+i+"</button>");
	}

	// handler to deal with the selecting of ability level
	$(".abilityLevelButton").click(function() {
		$(".abilityLevelButton").css('background', 'transparent');
		$(this).css('background', 'white');
		$("#tooltip_English_description").html(nl2br(getValueByLabel('tooltip.English.descriptions.'+$(this).html(), 0)));
		$("#tooltip_English_level").html("Level "+$(this).html());
	});
	
}

/**
 * Called when the user switches to this page
 */
function detailSwitch() {
	
}

function detailUpdate(abilityId) {

    var query = new google.visualization.Query(dataSourceUrl);
    var commentsQuery = new google.visualization.Query(detailCommentsSourceUrl);

    // store/get id
		if(abilityId<=0) {
			abilityId=0;
		}

    // perform comments query
    commentsQuery.setQuery("select * where A=" + abilityId);
    commentsQuery.send(
    function(data) {
        detailCommentsTable = data.getDataTable();
				$('#comments').html('');
        for (i = 0; i < detailCommentsTable.getNumberOfRows(); i++) {
            var date = detailCommentsTable.getValue(i, 1);
            var time = detailCommentsTable.getValue(i, 2);
            var authorName = detailCommentsTable.getValue(i, 3);
            var authorEmail = detailCommentsTable.getValue(i, 4);
            var comment = detailCommentsTable.getValue(i, 5);
            var current = $('#comments').html();
            $('#comments').html("<p class='comment'><b>" + authorName + "</b> said: " + comment + "</p>" + current);

        }
    }
    );

    // perform query
    query.setQuery("select * where A=" + abilityId);
    query.send(
    function(data) {

        dataTable = data.getDataTable();

        for (i = 0; i < dataTable.getNumberOfColumns(); i++) {
            detailColumnLabelToColumnIdMappings[dataTable.getColumnLabel(i)] = i;
        }

        // fill in icon
        $("#abilityIcon").attr("src", "http://dl.dropbox.com/u/8317512/icons/" + getValueByLabel('iconId', 0) + ".jpg");

        // fill in tooltip
        $("#tooltip_English_name").html(getValueByLabel('tooltip.English.name', 0));
        $("#tooltip_English_type").html(getValueByLabel('tooltip.English.type', 0));
        $("#tooltip_English_specline").html(getValueByLabel('tooltip.English.specline', 0));
        $("#tooltip_English_cost").html(getValueByLabel('tooltip.English.cost', 0));
        $("#tooltip_English_range").html(getValueByLabel('tooltip.English.range', 0));
        $("#tooltip_English_casttime").html(getValueByLabel('tooltip.English.casttime', 0));
        $("#tooltip_English_cooldown").html(getValueByLabel('tooltip.English.cooldown', 0));
        if (detailColumnLabelToColumnIdMappings['tooltip.English.requirement1']) {
            $("#tooltip_English_requirement1").html(getValueByLabel('tooltip.English.requirement1', 0));
        } else {
            $("#tooltip_English_requirement1").hide();
        }
        if (detailColumnLabelToColumnIdMappings['tooltip.English.requirement2']) {
            $("#tooltip_English_requirement2").html(getValueByLabel('tooltip.English.requirement2', 0));
        } else {
            $("#tooltip_English_requirement2").hide();
        }
        if (detailColumnLabelToColumnIdMappings['tooltip.English.requirement3']) {
            $("#tooltip_English_requirement3").html(getValueByLabel('tooltip.English.requirement3', 0));
        } else {
            $("#tooltip_English_requirement3").hide();
        }

        // fill in extras
        $("#abilityExtraTable_minimumRank").html(getValueByLabel('minimumRank', 0));
        $("#abilityExtraTable_minimumRenown").html(getValueByLabel('minimumRenown', 0));
        var careers = "";
        for (j = 1; j <= 24; j++) {
            if (detailColumnLabelToColumnIdMappings['career.' + j]) {
                var src = "http://dl.dropbox.com/u/8317512/careerIcons/career-icon_" + j + ".gif";
                careers += "<img src='" + src + "' style='width: 20px'/>";
            }
        }
        $("#abilityExtraTable_careers").html(careers);
        var flags = new Array();
        if (getValueByLabel('flags.Healing', 0)) {
            flags.push("Healing");
        }
        if (getValueByLabel('flags.Buff', 0)) {
            flags.push("Buff");
        }
        if (getValueByLabel('flags.StatsBuff', 0)) {
            flags.push("StatsBuff");
        }
        if (getValueByLabel('flags.Offensive', 0)) {
            flags.push("Offensive");
        }
        if (getValueByLabel('flags.Granted', 0)) {
            flags.push("Granted");
        }
        if (getValueByLabel('flags.Defensive', 0)) {
            flags.push("Defensive");
        }
        if (getValueByLabel('flags.Debuff', 0)) {
            flags.push("Debuff");
        }
        if (getValueByLabel('flags.Damaging', 0)) {
            flags.push("Damaging");
        }
        if (getValueByLabel('flags.Passive', 0)) {
            flags.push("Passive");
        }
        if (getValueByLabel('flags.NeedsPet', 0)) {
            flags.push("NeedsPet");
        }
        if (getValueByLabel('flags.Channeled', 0)) {
            flagString += " Channeled,";
        }
        $("#abilityExtraTable_flags").html(flags.join(","));

				// disable buttons below minimum rank
				for(i=1; i<=40; i++) {
					if(i<getValueByLabel('minimumRank', 0)) {
						$("#abilityLevelButton"+i).attr("disabled","disabled");
						$("#abilityLevelButton"+i).css("color", "#333333");
					} else {
						$("#abilityLevelButton"+i).attr("disabled","");
						$("#abilityLevelButton"+i).css("color", "red");
					}
				}

				// trigger level button click event
				$("#abilityLevelButton40").trigger('click');

    }
    );

}

function nl2br(text){
	text = escape(text);
	re_nlchar = "";
	if(text.indexOf('%0D%0A') > -1){
		re_nlchar = /%0D%0A/g ;
	}else if(text.indexOf('%0A') > -1){
		re_nlchar = /%0A/g ;
	}else if(text.indexOf('%0D') > -1){
		re_nlchar = /%0D/g ;
	}
	return unescape( text.replace(re_nlchar,'<br />') );
}

// return a value by label (rather than column index)
function getValueByLabel(lab, row) {
    return dataTable.getValue(row, detailColumnLabelToColumnIdMappings[lab]);
}

</script>

<!-- ======== -->
<!-- = HTML = -->
<!-- ======== -->
<div id="detailPanel" class="panel">

	<div id="abilityIconContainer">
		<img id="abilityIcon" src=""/>
		<img id="abilityIconSurround" src="http://dl.dropbox.com/u/8317512/icons/show_icon_holder.png"/>
	</div>

	<div id="tt">
	  <div id="ttNorth"></div>
	  <div id="ttCenter">
	    <table id="ttCenterTable">
	      <tr class="ttTitleRow"><td id="tooltip_English_name"></td><td id="tooltip_English_type" class="ttRight"></td></tr>
	      <tr><td id="tooltip_English_specline"></td><td id="tooltip_English_level" class="ttRight"></td></tr> 
	      <tr><td colspan="2"><hr class="ttSeperator" /></td></tr>  
	      <tr><td id="tooltip_English_cost"></td><td id="tooltip_English_range" class="ttRight"></td></tr>
	      <tr><td id="tooltip_English_casttime"></td><td id="tooltip_English_cooldown" class="ttRight"></td></tr>
	      <tr><td id="tooltip_English_requirement1" colspan="2" class="ttRequirementRow"></td></tr>         
	      <tr><td id="tooltip_English_requirement2" colspan="2" class="ttRequirementRow"></td></tr>
	      <tr><td id="tooltip_English_requirement3" colspan="2" class="ttRequirementRow"></td></tr>
	      <tr><td id="tooltip_English_description" colspan="2"></td></tr>
	    </table>
	  </div>
	  <div id="ttSouth"></div>           
	</div>

	<div id="abilityExtra">
	<table id="abilityExtraTable">
	<tr><td>Minimum Rank</td><td class="abilityExtraTable_value" id="abilityExtraTable_minimumRank"></td></tr>
	<tr><td>Minimum Renown</td><td  class="abilityExtraTable_value"id="abilityExtraTable_minimumRenown"></td></tr>
	<tr><td>Careers</td><td  class="abilityExtraTable_value"id="abilityExtraTable_careers"></td></tr>
	<tr><td>Flags</td><td  class="abilityExtraTable_value"id="abilityExtraTable_flags"></td></tr>
	<tr><td>Statistic Ratio</td><td class="abilityExtraTable_value"></td></tr>  
	<tr><td>Path Ratio</td><td class="abilityExtraTable_value"></td></tr>
	</table
	<div id="abilityLevelContainer"></div>
	</div>

	<hr style="border: 1px solid #2f4f72; margin-top: 32px"/>
	<div id="detailMenu">
		<span class="menuItem" title="Search" onclick="switchPanel('search')">SEARCH</span> | 
		<span class="menuItem" title="Abilities Listing and Filtering" onclick="switchPanel('listing')">ABILITIES</span> | 
		<span class="menuItem" title="Career and Renown Buidler" onclick="switchPanel('builder')">BUILDER</span> | 
		<span class="menuItem" title="Information about WarCache" onclick="switchPanel('about')">ABOUT</span> 
	</div>
	<hr style="border: 1px solid #2f4f72; margin-bottom: 32px"/>

	<h2 id="commentHeader">Comments (<a href="javascript:alert('Not yet implemted');">add comment</a>)</h2>
	<div id="comments"></div>

</div>
